<template>
	<u-popup :show="visible" round="16rpx" mode="bottom" @close="hide">
		<view class="quick-group-transfer">
			<view class="quick-group-transfer__head">
				<text>群人员列表</text>
				<view class="quick-group-transfer__head-close bg-hover" @tap="hide">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard/static/img/tips／close@2x_1681978220794.png"></u-image>
				</view>
			</view>

			<scroll-view class="quick-group-transfer__content" scroll-y>
				<view>
					<view class="quick-group-transfer__content-module bg-hover" v-for="(item,index) in items" :key="index">
						<u-avatar
							:src="item.icon||'https://file.casugn.com/storecompcard//GFnT1GaT8CD9089ddbabd7d7c2180f52b649e7945ba7_1661907569321.png'"
							size="64rpx"></u-avatar>
						<view class="quick-group-transfer__content-module-name">{{item.name}}</view>
						<template v-if="!item.loading">
							<view v-if="item.roleIdentify!==0" class="quick-group-transfer__content-module-btn">
								<u-icon name="share-square" color="#ff0000" size="40" @click="handleTransfer(item)"></u-icon>
							</view>
						</template>
						<u-loading-icon v-else size="28rpx"></u-loading-icon>
					</view>

					<template v-if="loadMoreStatus!=='loading'&&!items.length">
						<u-empty marginTop="30rpx" width="240rpx" height="240rpx" text="暂时没有人员" textSize="28rpx" textColor="#86909C"
							icon="https://file.casugn.com/storecompcard/temp/空页面@2x(11)_1681113828976.png"></u-empty>
					</template>

					<template v-if="loadMoreStatus==='loading'">
						<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus"
							@loadmore="scrolltolower" />
					</template>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				visible: false,
				model: {},
				items: [],
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		methods: {
			show(rocord) {
				this.visible = true
				this.model = JSON.parse(JSON.stringify(rocord))

				this.loadMoreStatus = 'loading'
				this.getDBData()
			},
			hide() {
				this.visible = false
			},
			async getDBData() {
				// 显示移交人员列表 使用新接口
				let params = {
					groupId: this.model.id
				}

				let res = await this.$api.getQuickGruopMemberListForTransfer(params)
				if (res.success) {
					this.items = res.result.filter(item => item.isDel === 0)
					this.loadMoreStatus = 'nomore'
				} else {
					uni.showToast({ title: res.message || '查询失败', icon: 'none' })
					this.loadMoreStatus = 'nomore'
				}
			},
			handleTransfer(item) {
				const that = this
				uni.showModal({
					content: `确定移交管理给${item.name}`,
					success: async (e) => {
						if (e.confirm) {
							// console.log(item, 'item 转交人信息');
							let groupId = that.model.id //群组id
							let transferOpenId = that.model.openId //原群主id
							let receiveOpenId = item.openId //新群主id

							that.$set(item, 'loading', true)
							let res = await that.$api.transferGroup(groupId, receiveOpenId, transferOpenId)
							if (res.success) {
								uni.showToast({ title: '移交成功!', icon: 'none' });
								that.$set(item, 'loading', true)
								that.$emit('refresh')
							} else {
								uni.showToast({ title: res.message || '移交失败!', icon: 'none' });
								that.$set(item, 'loading', true)
							}
						} else if (e.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.quick-group-transfer {
		position: relative;
		height: 60vh;

		.quick-group-transfer__head {
			position: relative;
			height: 92rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 44rpx;
			background-color: #fff;

			display: flex;
			justify-content: center;
			align-items: center;

			.quick-group-transfer__head-close {
				position: absolute;
				top: 30rpx;
				right: 32rpx;
			}
		}

		.quick-group-transfer__content {
			position: relative;
			height: calc(100% - 92rpx);
			padding: 24rpx 32rpx;
			background-color: #F7F8FA;
			box-sizing: border-box;

			.quick-group-transfer__content-module {
				padding: 24rpx;
				background-color: #fff;
				box-sizing: border-box;
				border-radius: 8rpx;

				display: flex;
				align-items: center;

				&:nth-child(n+2) {
					margin-top: 24rpx;
				}

				.quick-group-transfer__content-module-name {
					padding: 0 20rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 44rpx;
				}

				.quick-group-transfer__content-module-btn {
					margin-left: auto;
				}
			}
		}
	}
</style>